<template>
  <div class="bb">
    <ul>
      <li>
        <router-link to="/home">
          <div class="side">
            <div class="old" @click="fun(0)">
              <span class="iconfont icon-shouye"></span>
              <p>主页</p>
            </div>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/live">
          <div class="side">
            <div class="old" @click="fun(1)">
              <span class="iconfont icon-xianchang"></span>
              <p>现场</p>
            </div>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/vip">
          <div class="side">
            <div class="old" @click="fun(2)">
              <span class="iconfont icon-huiyuan"></span>
              <p>会员</p>
            </div>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/tiekct">
        <div class="side">
             <div class="old" @click="fun(3)">
              <span class="iconfont icon-gerenpiaojia"></span>
              <p>票夹</p>
          </div>
        </div>
           
        </router-link>
      </li>
      <li>
        <router-link to="/my">
          <div class="side">
            <div class="old" @click="fun(4)">
              <span class="iconfont icon-wode"></span>
              <p>我的</p>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   props:['title'],
  methods: {
    fun(data) {
      let Oa = document.getElementsByClassName("old");
      console.log(Oa.length);
      for (let i = 0; i < Oa.length; i++) { 
           console.log(Oa[i]);
           Oa[i].className = "old";
      }
           Oa[data].className = "new";
      
    },
  },
};
</script>

<style scoped>
/* .bb{
  z-index: 1;
} */
ul {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 0.5rem;
  background-color: white;
  font-size: 0.2rem;

  display: flex;
  justify-content: space-around;
}
.router-link-active{
  color: skyblue;
}
a {
  text-decoration: none;
  color: black;
}
li {
  width: 20%;
  height: 100%;
  list-style: none;
  text-align: center;
  box-sizing: border-box;
  /* line-height: 1rem; */
}

ul li p {
  /* line-height: 1rem; */
}
span {
  font-size: 0.2rem;
}
.old {
  color: black;
}
.new {
  color: skyblue;
}
</style>